<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>

<body>
  <header>
    <!-- navbar -->
    <nav class="navbar">
      <ul class="links-container">
        <li class="link-item">
          <a href="#">Travels</a>
        </li>
        <li class="link-item">
          <a href="#explore-section">Explore</a>
        </li>
        <li class="link-item">
          <a href="#hero-section"><img src="img/logo.png" alt="logo" class="logo"></a>
        </li>
        <li class="link-item">
          <a href="#">Services</a>
        </li>
        <li class="link-item">
          <a href="#">Book your tour</a>
        </li>

      </ul>
    </nav>

    <!-- hero section -->
    <main class="hero-section" id="hero-section">

      <!-- background -->
      <div class="background">
        <img src="img/img1.png" alt="hero-section-image" class="background-image">
        <!-- grid -->
        <div class="slider-grid">
          <div class="grid-item hide">
          </div>
          <div class="grid-item hide">
          </div>
          <div class="grid-item hide">
          </div>
          <div class="grid-item hide">
          </div>
          <div class="grid-item hide">
          </div>
          <div class="grid-item hide">
          </div>

        </div>
      </div>
      <div class="hero-section-content" data-aos="fade-up">
        <h1 class="hero-section-title">wonderful experience</h1>
        <p class="hero-section-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>

      <!-- scroll down img -->
      <img src="img/down arrow.png" class="scroll-down-icon" alt="scroll down">
    </main>

  </header>
  <!-- explore section -->
  <section class="explore-section" id="explore-section">
    <h1 class="section-title" data-aos="fade-up">Explore the world</h1>
    <p class="section-para" data-aos="fade-up">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utrutrum sem augue, vitae bibendum nibh tempor nex.
      Aenean quis commodo lectus, in rhoncus lorem
    </p>
    <!-- grid -->
    <div class="tours-container">
      <div class="tour-card" data-aos="fade-up">
        <img src="img/australia.png" class="tour-img" alt="">
        <div class="tour-body">
          <h1 class="tour-name">Australia</h1>
          <p class="tour-action">View City</p>
        </div>
      </div>
      <div class="tour-card" data-aos="fade-up">
        <img src="img/maldives.png" class="tour-img" alt="">
        <div class="tour-body">
          <h1 class="tour-name">Maldives</h1>
          <p class="tour-action">View City</p>
        </div>
      </div>
      <div class="tour-card" data-aos="fade-up">
        <img src="img/paris.png" class="tour-img" alt="">
        <div class="tour-body">
          <h1 class="tour-name">Paris</h1>
          <p class="tour-action">View City</p>
        </div>
      </div>
      <div class="tour-card" data-aos="fade-up">
        <img src="img/dubai.png" class="tour-img" alt="">
        <div class="tour-body">
          <h1 class="tour-name">Dubai</h1>
          <p class="tour-action">View City</p>
        </div>
      </div>
      <div class="tour-card" data-aos="fade-up">
        <img src="img/india.png" class="tour-img" alt="">
        <div class="tour-body">
          <h1 class="tour-name">India</h1>
          <p class="tour-action">View City</p>
        </div>
      </div>
      <div class="tour-card" data-aos="fade-up">
        <img src="img/italy.png" class="tour-img" alt="">
        <div class="tour-body">
          <h1 class="tour-name">Italy</h1>
          <p class="tour-action">View City</p>
        </div>
      </div>
    </div>
  </section>


  <!-- animate on scoll JS CDN -->
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

  <!-- local JS File -->
  <script src="app.js"></script>
</body>

</html>